<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Pac-Man小游戏</title>
  <link rel="stylesheet" href="../css/game.css ">
  <link rel="shortcut icon" href="../images/favicon.png">
</head>

<body>
  <div class="bg">
  <!-- header -->
  <header>
    <img src="../images/logo.png" class="logo" alt="Logo">
    <ul>
      <li><a href="../index.html" class="active">首页</a></li>
      <li><a href="../Branch/game.html"  class="about">游戏</a></li>
      <li><a href="./About us.html">关于我们</a></li>
      <li><a href="https://gitee.com/chen-jieyan-jy/group-assignments/blob/main/PAC-MAN%20GAME/.keep">我们的仓库</a></li>
    </ul>
  </header>
  <!-- main -->
  <div class="container">
  

    <div class="member">
     
	<div class="wrapper">
		<canvas id="canvas" width="960" height="640">不支持画布</canvas>
    <p>使用←↑↓→控制角色 按［空格］暂停或继续</p>
	</div>
	<script src="../js/game.js"></script>
	<script src="../js/game2.js"></script>
  </div>
  </div>
  <script>
    let stars = document.getElementById('stars')
    let moon = document.getElementById('moon')
    let mountains_behind = document.getElementById('mountains_behind')
    let text = document.getElementById('text')
    let btn = document.getElementById('btn')
    let mountains_front = document.getElementById('mountains_front')
    let header = document.querySelector('header')

    window.addEventListener('scroll', function () {
      let value = window.scrollY;
      stars.style.left = value * 0.25 + 'px'
      moon.style.top = value * 1.05 + 'px'
      mountains_behind.style.top = value * 0.5 + 'px'
      mountains_front.style.top = value * 0 + 'px'
      text.style.marginRight = value * 4 + 'px'
      text.style.marginTop = value * 1.5 + 'px'
      btn.style.marginTop = value * 1.5 + 'px'
      header.style.top = value * 0.5 + 'px'
    })
  </script>
</body>

</html>